<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<!-- 引入 lib 目录下的 bootstrap 样式表 -->
	<link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css">
	<style>
		:root {
			font-size: 15px;
		}

		body {
			padding-top: 15px;
		}
	</style>
</head>

<body>

	<!-- 栅格系统 -->
	<div class="container-fluid">
		<!-- 栅格系统中的一行 -->
		<div class="row">
			<!-- 左侧的表格，占了 8 列 -->
			<div class="col-sm-8">
				<table class="table table-bordered table-striped table-dark table-hover text-center">
					<thead>
						<!-- 表头行 -->
						<tr>
							<th scope="col">Id</th>
							<th scope="col">书名</th>
							<th scope="col">作者</th>
							<th scope="col">出版社</th>
							<th scope="col">操作</th>
						</tr>
					</thead>
					<tbody>
						<!-- 表格中的每一行 -->
						<tr>
							<th scope="row">xxx</th>
							<td>xxx</td>
							<td>xxx</td>
							<td>xxx</td>
							<td>
								<button type="button" class="btn btn-link btn-sm">删除</button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>

			<!-- 右侧的添加区域，占了 4 列 -->
			<div class="col-sm-4">
				<!-- 添加图书的卡片 -->
				<div class="card text-white bg-secondary sticky-top">
					<div class="card-header">添加新图书</div>
					<form class="card-body bg-light" id="addForm">
						<!-- 书名 -->
						<div class="input-group mb-3">
							<div class="input-group-prepend">
								<span class="input-group-text">书名</span>
							</div>
							<input type="text" class="form-control" placeholder="请输入图书名称" name="bookname">
						</div>
						<!-- 作者 -->
						<div class="input-group mb-3">
							<div class="input-group-prepend">
								<span class="input-group-text">作者</span>
							</div>
							<input type="text" class="form-control" placeholder="请输入作者名字" name="author">
						</div>
						<!-- 出版社 -->
						<div class="input-group mb-3">
							<div class="input-group-prepend">
								<span class="input-group-text">出版社</span>
							</div>
							<input type="text" class="form-control" placeholder="请输入出版社名称" name="publisher">
						</div>
						<!-- 添加按钮 -->
						<button class="btn btn-dark" type="submit">添加</button>
					</form>
				</div>
			</div>
		</div>
	</div>

	<!-- 引入 lib 目录下的 jQuery 和 axios -->
	<script src="./lib/jquery-v3.6.0.js"></script>
	<script src="./lib/axios.js"></script>
	<script>
		// 入口函数 - window.onload
		$(function () {
			// 需求1: 获取图书列表，渲染渲染到页面;
			// 需求2: 点击按钮添加图书;
			// 需求3: 点击a连接删除图书;
			
			// 设置axios全局基础路径
			// axios.defaults.baseURL = 'http://www.liulongbin.top:3009';
			// axios.defaults.baseURL = 'http://192.168.69.69:3009'; // 班长ip
			// axios.defaults.baseURL = 'http://localhost:3009'; // 吕超ip
			axios.defaults.baseURL = 'http://192.168.69.84:3009'; // 吕超ip
			

			// 需求1: 获取图书列表，渲染渲染到页面;
			//   注意: 添加功能应该是: 发送一个ajax添加，然后在发一个ajax重新获取并渲染;
			//   注意: 删除功能应该是: 发送一个ajax删除，然后在发一个ajax重新获取并渲染;
			// 后面摇经常使用这个方法，所以封装成函数
			function renderBookList() {
				// 发送ajax
				axios.get('/api/getbooks').then(({ data: res }) => {
					// 判断业务状态码
					if (res.code != 200) {
						return alert(res.msg);
					}
					// 渲染
					const arr = res.data.map(item => `
						<tr>
							<th scope="row">${ item.id }</th>
							<td>${ item.bookname }</td>
							<td>${ item.author }</td>
							<td>${ item.publisher }</td>
							<td>
								<button type="button" data-id="${ item.id }" class="btn-delete btn btn-link btn-sm">删除</button>
							</td>
						</tr>
					`);
					// 赋值
					tbody.innerHTML = arr.join('');
				})
			}
			// tbody 后面还要用，所以单独获取
			const tbody = document.querySelector("tbody");
			// 页面加载的时候调用一次
			renderBookList();

			// 需求2: 点击按钮添加图书;
			// 获取form表单，绑定submit提交事件
			const addForm = document.querySelector("#addForm");
			addForm.addEventListener('submit', function (e) {
				// 阻止默认提交
				e.preventDefault();
				// $(this).serialize()获取表单数据，需要借助name属性，默认结构中已经设置完成;
				// 发送ajax               此处直接放form表单参数字符串
				axios.post('/api/addbook', $(this).serialize()).then(({ data: res }) => {
					// console.log(res);
					// 判断业务状态码
					if (res.code != 201) {
						return alert(res.msg);
					}
					// 成功提示
					alert("恭喜您，添加图书成功！");
					// 重新渲染数据
					renderBookList();
					// 重置form表单，可以清空内容
					addForm.reset(); // 手动触发 reset 事件
				})
			})

			// 需求3: 点击a连接删除图书;
			//   删除按钮是动态创建的，所以需要 - 事件委托/事件代理;
			tbody.addEventListener('click', function (e) {
				// console.log(e.target);
				// console.log(e.target.classList.contains('btn-delete'));
				// 判断是否包含某个类名
				// if (e.target.className.indexOf('btn-delete') != -1){
				if (!e.target.classList.contains('btn-delete')){
					// 不包含这个类名就不要继续执行了
					return; 
				}
				// 获取自定义属性值
				const id = e.target.dataset.id;
				// 下面就真的发送ajax
				axios.delete('/api/delbook', {
					params: { 
						id: id
					}
				}).then(({ data: res }) => {
					// 判断业务状态码
					if (res.code != 200) {
						return alert(res.msg);
					}
					// 成功提示
					alert('恭喜您，删除成功！');
					// 重新渲染页面
					renderBookList();
				});
			})

		})
	</script>
</body>

</html>